<template>
  <div style="padding: 20px">
    <!-- 查询-->
    <el-row style="margin-bottom: 15px" :gutter="10">
      <el-col :span="3">
        <el-select v-model="queryParams.areaCode" placeholder="区域范围">
          <el-option
            v-for="item in areaList"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          clearable
          v-model="queryParams.unitName"
          placeholder="请输入单位名称"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="queryParams.rectificationStatus"
          placeholder="请选择整改状态"
          clearable
        >
          <el-option label="已整改" :value="'1'"></el-option>
          <el-option label="未整改" :value="'2'"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="selectedDataArr"
          type="daterange"
          range-separator="——"
          start-placeholder="检查开始日期"
          end-placeholder="检查结束日期"
          value-format="yyyy-MM-dd"
          style="width: 100%"
          @change="changeDate"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table stripe border :data="tableData" style="width: 100%">
      <!-- <el-table-column
        prop="date"
        label="#"
        align="center"
        show-overflow-tooltip
        width="50"
        type="index"
      >
      </el-table-column> -->
      <el-table-column
        prop="districtStreet"
        label="区域街道"
        align="center"
        show-overflow-tooltip
        width="130"
      >
      </el-table-column>
      <el-table-column prop="operatorName" label="单位名称" align="center" width="260">
      </el-table-column>
      <!-- <el-table-column prop="name" label="监管部门" align="center" show-overflow-tooltip>
      </el-table-column> -->
      <el-table-column
        prop="itemNo"
        label="检查项目编号"
        align="center"
        show-overflow-tooltip
        width="110"
      >
      </el-table-column>
      <el-table-column
        prop="itemContent"
        label="检查项目内容"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="inspectionResults"
        label="检查结果"
        align="center"
        show-overflow-tooltip
        width="80"
      >
        <template slot-scope="scope">
          <span>
            <el-tag
              v-if="scope.row.inspectionResults === '合格'"
              type="success"
              size="mini"
              >合格</el-tag
            >
            <el-tag v-else type="danger" size="mini">不合格</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="rectificationName"
        label="整改责任人"
        align="center"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="createTimeStr"
        label="检查日期"
        align="center"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="rectificationDateStr"
        label="整改日期"
        align="center"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="rectifyAndReform"
        label="是否整改"
        align="center"
        show-overflow-tooltip
        width="80"
      >
        <template slot-scope="scope">
          <span>
            <el-tag
              v-if="scope.row.rectifyAndReform === '已整改'"
              type="success"
              size="mini"
              >已整改</el-tag
            >
            <el-tag v-else type="danger" size="mini">未整改</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" show-overflow-tooltip width="80">
        <template slot-scope="scope">
          <span>
            <el-button size="mini" @click="handleView(scope.row)">详情</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="float: right; margin: 20px 0px"
      @current-change="handleCurrentChange"
      :page-size="queryParams.pageSize"
      background
      layout="total, prev, pager, next"
      :total="listTotal"
    >
    </el-pagination>

    <!-- 弹窗 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="50%">
      <el-form label-width="auto">
        <el-row>
          <el-col :span="24">
            <el-form-item label="检查内容：">
              {{ dialogContent.itemContent }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目编号：">
              {{ dialogContent.itemNo }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查结果：">
              {{ dialogContent.inspectionResults }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="检查备注：">
              {{ dialogContent.remark }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检查时间：">
              {{ dialogContent.createTimeStr }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查照片：">
              <el-image
                v-show="dialogContent.fileUrl"
                style="width: 100px; height: 100px"
                :src="dialogContent.fileUrl"
                :preview-src-list="[dialogContent.fileUrl]"
              >
                ></el-image
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRiskItemList } from "@/api/modules/enterprise";
export default {
  props: [],
  data() {
    return {
      selectedDataArr: [],
      areaCode: "",
      areaList: [],
      queryParams: {
        areaCode: "",
        // firstIndex: 0,
        // firstIndexNew: 0,
        isPage: 0,
        // lastIndex: 0,
        // lastIndexNew: 0,
        page: 1,
        pageSize: 10,
        rectificationEndDate: "",
        rectificationStartDate: "",
        rectificationStatus: "",
        unitName: "",
      },
      tableData: [],
      listTotal: 0,
      dialogVisible: false,
      dialogContent: {},
    };
  },
  //页面加载
  created() {
    if (this.$route.query.code) {
      this.areaCode = this.$route.query.code;
    } else {
      this.areaCode = "320500000000";
    }
    this.queryParams.areaCode = this.areaCode;
    this.findListByParentCode();
    this.getList(this.queryParams);
  }, // 页面加载完成
  mounted() {}, //实例销毁之前
  beforeDestroy() {}, //实例销毁后
  destroyed() {},
  methods: {
    //获取区域列表
    findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.areaCode,
        })
        .then((res) => {
          this.areaList = res.data;
        });
    },

    changeDate(val) {
      // console.log(val);
      if (val) {
        this.queryParams.rectificationStartDate = val[0];
        this.queryParams.rectificationEndDate = val[1];
      } else {
        this.queryParams.rectificationStartDate = "";
        this.queryParams.rectificationEndDate = "";
      }
    },

    handleCurrentChange(currentPage) {
      this.queryParams.page = currentPage;
      this.getList(this.queryParams);
    },

    handleQuery() {
      this.getList(this.queryParams);
    },

    handleView(val) {
      this.dialogVisible = true;
      this.dialogContent = val;
    },

    async getList(params) {
      try {
        const res = await getRiskItemList(params);
        this.tableData = res.data.list;
        this.listTotal = res.data.total;
      } catch (err) {
        console.log(err);
      }
    },
  }, //方法
  watch: {}, //监听属性
  components: {}, //组件
  computed: {}, //计算属性
};
</script>
<style lang="scss" scoped></style>
